<template>
  <div>
    <el-card>
    <!--    面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/cscindex' }">客户服务中心</el-breadcrumb-item>
      <el-breadcrumb-item>客户管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加客户</el-breadcrumb-item>
    </el-breadcrumb>
      <br>
      <br>
      <!-- 添加用户表单 -->
      <el-form ref="formdate" :model="formdate" label-width="100px" label-position="left">
        <el-form-item label="客户名称" :required="true">
          <el-col :span="6">
            <el-input v-model="formdate.name" size="small"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="移动电话" :required="true">
          <el-col :span="6">
            <el-input v-model="formdate.phone" size="small"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="电子邮箱" :required="true">
          <el-col :span="8">
            <el-input v-model="formdate.email" size="small"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="联系地址" :required="true">
          <el-col :span="14">
          <el-input v-model="formdate.address" size="small"></el-input>
          </el-col>
        </el-form-item>
        <el-row>
          <el-col :span="7">
            <el-form-item label="邮编" :required="true">
              <el-input v-model="formdate.emailNumber" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7" style="margin-left: 40px">
            <el-form-item label="座机">
              <el-input v-model="formdate.landline" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="工作单位">
          <el-col :span="14">
          <el-input v-model="formdate.employer" size="small" type="textarea"></el-input>
          </el-col>
        </el-form-item>
        <div class="submitposition">
          <el-button type="primary" @click="onSubmit">创建用户</el-button>
          <router-link :to="{path:'/cscindex'}" style="margin-left: 50px;">
            <el-button style="width: 100px">取消</el-button>
          </router-link>
        </div>
      </el-form>
    </el-card>
  </div>
</template>
<script>
    export default {
        data(){
            return{
                formdate:{
                    address:'',
                    email:'',
                    emailNumber:'',
                    employer:'',
                    // id:'',
                    landline:'',
                    name:'',
                    phone:'',
                    // createTime:'',
                    // updateTime:''
                }
            }
        },
        methods:{
          //创建用户按钮
          onSubmit(){
            if(this.formdate.name===''||this.formdate.phone===''||this.formdate.email===''||this.formdate.emailNumber===null||this.formdate.address===''){
              this.$message.error('必填信息未填写完成！')
            }else{
              this.addcustom()
              // console.log(this.formdate)
            }
          },
          //创建用户
          async addcustom(){
            // let param=qs.stringify(this.formdate)
            const{data:res}=await this.$http
            .post('/api/client_server/add_client',
            {
              address:this.formdate.address,
              email:this.formdate.email,
              emailNnumber:this.formdate.emailNumber,
              employer:this.formdate.employer,
              landline:this.formdate.landline,
              name:this.formdate.name,
              phone:this.formdate.phone
            })
            .catch(err=>{
              this.$message.error('对不起，服务器异常或权限不够！')
              console.log(err.message)
            })
            if(res.code!==200){
              this.$message.error('电话或电子邮箱已被注册！')
            }else(
              this.$message.success('添加用户成功！')
            )
            console.log(res)
          }
        },
        created(){
          // this.addcustom()
        }
    }
</script>

<style scoped>

</style>
